<div ng-controller="UI.UITestController2">

  <div>
    <div class="row-fluid">
      <h3>Template Popover</h3>
      <p>Uses bootstrap popover but lets you supply an angular template to render as the popover body.  For example here's a simple template for the popover body:</p>
      <script type="text/ng-template" id="myTemplate">
<table>
  <tbody>
    <tr ng-repeat="(k, v) in stuff track by $index">
      <td ng-bind="k"></td>
      <td ng-bind="v"></td>
    </tr>
  </tbody>
</table>
      </script>
      <div hawtio-editor="popoverEx" mode="fileUploadExMode"></div>

      <p>
      You can then supply this template as an argument to hawtioTemplatePopover.  By default it will look for a template in $templateCache called "popoverTemplate", or specify a templte for the "content" argument.  You can specify "placement" if you want the popover to appear on a certain side, or "auto" and the directive will calculate an appropriate side ("right" or "left") depending on where the element is in the window.
      </p>

      <script type="text/ng-template" id="popoverExTemplate">
<ul>
  <li ng-repeat="stuff in things" hawtio-template-popover content="myTemplate">{{stuff.name}}</li>
</ul>
      </script>
      <div hawtio-editor="popoverUsageEx" mode="fileUploadExMode"></div>
      <div class="directive-example">
        <div compile="popoverUsageEx"></div>
      </div>
    </div>

  </div>
</div>
